<template>
  <div class="">
    <el-row style="height:40px;margin-top:30px;width:100%;margin-left:10px">
      <el-col :span="16">
        <el-radio-group v-model="optionHours" @change="ChangeTimeValue">
          <el-radio label="12" border size="small">过去12h</el-radio>
          <el-radio label="24" border size="small">过去1天</el-radio>
          <el-radio label="168" border size="small">过去1周</el-radio>
          <el-radio label="720" border size="small">过去1月</el-radio>
        </el-radio-group>
        <el-date-picker v-model="date" size="small" value-format="yyyy-MM-dd HH:mm:ss" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
        <el-button size="small" @click="searchTime"><i class="el-icon-search" /></el-button>
      </el-col>
      <el-col :span="8">
        <el-button size="medium" type="primary" icon="el-icon-receiving"  @click="exportData">导出数据</el-button>
        <el-button size="medium" type="primary" icon="el-icon-arrow-left" @click="GoBack">返回</el-button>
        <el-select v-model="gateway" placeholder="请选择网关" @change="ChangeGatewayName">
          <el-option
            v-for="item in options"
            :key="item.gatewayName"
            :label="item.gatewayName"
            :value="item"
          />
        </el-select>
      </el-col>
    </el-row>
    <div class="table">
      <el-table
        :data="table"
        style="width: 100%"
      >
        <el-table-column
          class="index-text"
          label="序号"
          type="index"
          width="80"
        />
        <el-table-column
          label="空气温度(℃)"
          width="145"
        >
          <template slot-scope="scope">
            <span class="text">{{ scope.row["空气温度"].value }}</span>
            <span>({{ scope.row["空气温度"].dataTime }})</span>
          </template>
        </el-table-column>
        <el-table-column
          label="空气湿度(%)"
          width="145"
        >
          <template slot-scope="scope">
            <span class="text">{{ scope.row["空气湿度"].value }}</span>
            <span>({{ scope.row["空气湿度"].dataTime }})</span>
          </template>
        </el-table-column>
        <el-table-column
          label="气压(hPa)"
          width="145"
        >
          <template slot-scope="scope">
            <span class="text">{{ scope.row["气压"].value }}</span>
            <span>({{ scope.row["气压"].dataTime }})</span>
          </template>
        </el-table-column>
        <el-table-column
          label="光照强度(Lux)"
          width="145"
        >
          <template slot-scope="scope">
            <span class="text">{{ scope.row["光照强度"].value }}</span>
            <span>({{ scope.row["光照强度"].dataTime }})</span>
          </template>
        </el-table-column>
        <el-table-column
          label="风向()"
          width="146"
        >
          <template slot-scope="scope">
            <span class="text">{{ scope.row["风向"].value }}</span>
            <span>({{ scope.row["风向"].dataTime }})</span>
          </template>
        </el-table-column>
        <el-table-column
          label="风速(m/s)"
          width="145"
        >
          <template slot-scope="scope">
            <span class="text">{{ scope.row["风速"].value }}</span>
            <span>({{ scope.row["风速"].dataTime }})</span>
          </template>
        </el-table-column>
        <el-table-column
          label="降雨量(mm/min)"
          width="145"
        >
          <template slot-scope="scope">
            <span class="text">{{ scope.row["雨量"].value }}</span>
            <span>({{ scope.row["雨量"].dataTime }})</span>
          </template>
        </el-table-column>
        <el-table-column
          label="土壤湿度(%)"
          width="145"
        >
          <template slot-scope="scope">
            <span class="text">{{ scope.row["土壤湿度"].value }}</span>
            <span>({{ scope.row["土壤湿度"].dataTime }})</span>
          </template>
        </el-table-column>
        <el-table-column
          label="土壤温度(℃)"
          width="145"
        >
          <template slot-scope="scope">
            <span class="text">{{ scope.row["土壤温度"].value }}</span>
            <span>({{ scope.row["土壤温度"].dataTime }})</span>
          </template>
        </el-table-column>
        <el-table-column
          label="土壤导电率(us/cm)"
          width="145"
        >
          <template slot-scope="scope">
            <span class="text">{{ scope.row["土壤水分"].value }}</span>
            <span>({{ scope.row["土壤水分"].dataTime }})</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="pages">
        <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
      </div>
    </div>
  </div>
</template>

<script>
import { getSensorGateway, getSensorGatewayHistoryByTime, getSensorGatewayHistoryByDate } from '@/api/sensor'
import { exportReportDataByTime, exportReportDataByDate } from '@/api/sensor'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination

export default {
  components: { Pagination },
  data() {
    return {
      host: this.$store.state.host,
      total: 0,
      isHistoryByHours: true,
      regionName: '',
      optionHours: '12',
      date: [],
      gateway: '',
      options: [],
      table: [],
      listQuery: {
        page: 1,
        limit: 10,
        title: undefined,
        province: undefined,
        city: undefined,
        area: undefined
      }
    }
  },
  mounted() {

  },
  created() {
    this.regionName = this.$route.params.RegionName
    getSensorGateway(this.regionName).then(res => {
      this.options = res.data
      this.gateway = this.options[0]
      const historyData = {
        hours: this.optionHours, // 获取当前时间戳
        gatewayAddress: this.gateway.gatewayAddress,
        limit: '10',
        page: this.listQuery.page
      }
      // getSensorGatewayHistoryByTime(historyData).then(res => {
      //   console.log(res)
      //   this.total = res.data.pages
      //   const tb = []
      //   for (let i = 0; i < res.data.records.雨量.length; i++) {
      //     tb[i] = {}
      //     this.$set(tb[i], '空气湿度', res.data.records.空气湿度[i])
      //     this.$set(tb[i], '空气温度', res.data.records.空气温度[i])
      //     this.$set(tb[i], '风速', res.data.records.风速[i])
      //     this.$set(tb[i], '风向', res.data.records.风向[i])
      //     this.$set(tb[i], '光照强度', res.data.records.光照强度[i])
      //     this.$set(tb[i], '土壤温度', res.data.records.土壤温度[i])
      //     this.$set(tb[i], '土壤湿度', res.data.records.土壤湿度[i])
      //     this.$set(tb[i], '土壤水分', res.data.records.土壤水分[i])
      //     this.$set(tb[i], '雨量', res.data.records.雨量[i])
      //     this.$set(tb[i], '露点', res.data.records.露点[i])
      //     this.$set(tb[i], '气压', res.data.records.气压[i])
      //   }
      //   this.table = tb
      //   console.log(this.table)
      // })
      this.newFetch()
    })
  },
  methods: {
    newFetch(){
      const historyData = {
      hours: this.optionHours, // 获取当前时间戳
      gatewayAddress: this.gateway.gatewayAddress,
      limit: '10',
      page: this.listQuery.page
    }
      getSensorGatewayHistoryByTime(historyData).then(res => {
        this.total = res.data.total
        const tb = []
        for (let i = 0; i < res.data.records.雨量.length; i++) {
          tb[i] = {}
          this.$set(tb[i], '空气湿度', res.data.records.空气湿度[i])
          this.$set(tb[i], '空气温度', res.data.records.空气温度[i])
          this.$set(tb[i], '风速', res.data.records.风速[i])
          this.$set(tb[i], '风向', res.data.records.风向[i])
          this.$set(tb[i], '光照强度', res.data.records.光照强度[i])
          this.$set(tb[i], '土壤温度', res.data.records.土壤温度[i])
          this.$set(tb[i], '土壤湿度', res.data.records.土壤湿度[i])
          this.$set(tb[i], '土壤水分', res.data.records.土壤水分[i])
          this.$set(tb[i], '雨量', res.data.records.雨量[i])
          this.$set(tb[i], '露点', res.data.records.露点[i])
          this.$set(tb[i], '气压', res.data.records.气压[i])
        }
        this.table = tb
        console.log(this.table)
        })
    },
    newFetchByDate(){
      const historyByDate = {
        endTime: this.date[0],
        startTime: this.date[1],
        gatewayAddress: this.gateway.gatewayAddress,
        limit: '10',
        page: this.listQuery.page
      }
      console.log(historyByDate)
      getSensorGatewayHistoryByDate(historyByDate).then( res => {
        console.log(res)
        this.total = res.data.total
        const tb = []
        for (let i = 0; i < res.data.records.雨量.length; i++) {
          tb[i] = {}
          this.$set(tb[i], '空气湿度', res.data.records.空气湿度[i])
          this.$set(tb[i], '空气温度', res.data.records.空气温度[i])
          this.$set(tb[i], '风速', res.data.records.风速[i])
          this.$set(tb[i], '风向', res.data.records.风向[i])
          this.$set(tb[i], '光照强度', res.data.records.光照强度[i])
          this.$set(tb[i], '土壤温度', res.data.records.土壤温度[i])
          this.$set(tb[i], '土壤湿度', res.data.records.土壤湿度[i])
          this.$set(tb[i], '土壤水分', res.data.records.土壤水分[i])
          this.$set(tb[i], '雨量', res.data.records.雨量[i])
          this.$set(tb[i], '露点', res.data.records.露点[i])
          this.$set(tb[i], '气压', res.data.records.气压[i])
        }
        this.table = tb
        console.log(this.table)
      })
    },
    exportData() {
      const queryByHours = {
        gatewayAddress: this.gateway.gatewayAddress,
        hours: this.optionHours,
      }
      const queryByDate = {
        gatewayAddress: this.gateway.gatewayAddress,
        startTime: this.date[0],
        endTime: this.date[1]
      }
      if(this.isHistoryByHours){
        exportReportDataByTime(queryByHours).then(res => {
          const blob = new Blob([res.data])
          const downloadElement = document.createElement('a')
          const href = window.URL.createObjectURL(blob) // 创建下载的链接
          downloadElement.href = href
          downloadElement.download = '历史数据.xlsx' // 下载后文件名
          document.body.appendChild(downloadElement)
          downloadElement.click() // 点击下载
          document.body.removeChild(downloadElement) // 下载完成移除元素
          window.URL.revokeObjectURL(href) // 释放掉blob对象
        })
      }
      else{
        exportReportDataByDate(queryByDate).then(res => {
          const blob = new Blob([res.data])
          const downloadElement = document.createElement('a')
          const href = window.URL.createObjectURL(blob) // 创建下载的链接
          downloadElement.href = href
          downloadElement.download = '历史数据.xlsx' // 下载后文件名
          document.body.appendChild(downloadElement)
          downloadElement.click() // 点击下载
          document.body.removeChild(downloadElement) // 下载完成移除元素
          window.URL.revokeObjectURL(href) // 释放掉blob对象
        })
      }
      exportReportDataByTime(query).then(res => {
        const blob = new Blob([res.data])
        const downloadElement = document.createElement('a')
        const href = window.URL.createObjectURL(blob) // 创建下载的链接
        downloadElement.href = href
        downloadElement.download = '历史数据.xlsx' // 下载后文件名
        document.body.appendChild(downloadElement)
        downloadElement.click() // 点击下载
        document.body.removeChild(downloadElement) // 下载完成移除元素
        window.URL.revokeObjectURL(href) // 释放掉blob对象
      })
    },
    GoBack() {
      this.$router.go(-1)
    },
    ChangeGatewayName() {
      this.ChangeTimeValue()
    },
    ChangeTimeValue() {
      this.isHistoryByHours = true
      this.date = []
      this.newFetch()
    },
    getList() {
      if(this.isHistoryByHours){
        this.newFetch()
      }
      else{
        this.newFetchByDate()
      }
    },
    searchTime(){
      console.log(this.date)
      this.isHistoryByHours = false
      this.listQuery.page = 1;
      this.newFetchByDate()
    }
  }
}
</script>
<style>
.table{
    margin: 15px;
}
.text{
  color: #FF8000	;
}
.index-text{
  text-align: center;
}
.pages{
  text-align: center;
}
</style>
